import React, { useState } from 'react';
import { Form, message, Modal, Spin } from 'antd';

import { isSuccess } from '@/utils/request';
import If from '@/components/If';
import { SearchInput } from '@/components/UserForm';

import { transfer } from '@/services/salaryManage/salaryConfirm';
import { queryFeedbackEmployeeList } from '@/services/salaryManage/salaryCommon';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import LimitInput from '@/components/LimitInput';

const TransferModal = React.memo(
    Form.create()(({ form, visible, onOk, onCancel, model, organizationCode }) => {
        const [loading, setLoading] = useState(false);
        const handleOk = () => onOk(form.getFieldsValue(), form, model, setLoading);

        return (
            <Modal
                title="转配接收人"
                visible={visible}
                okText="确认"
                onOk={handleOk}
                cancelText="取消"
                onCancel={onCancel}
                confirmLoading={loading}
            >
                <Spin spinning={loading}>
                    <Form layout="horizontal" labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
                        <Form.Item label="原接收人">{model.receiver}</Form.Item>
                        <Form.Item label="接收人" className={salaryStyle.mt22}>
                            <span>
                                {form.getFieldDecorator('employeeCode', {
                                    rules: [{ required: true, message: '请选择接收人' }]
                                })(
                                    <SearchInput
                                        getData={async () => {
                                            const response = await queryFeedbackEmployeeList({ organizationCode });
                                            const result = isSuccess(response) ? response.data || [] : [];

                                            // 过滤掉不可用
                                            return result.filter(item => !item.disabled);
                                        }}
                                        selectProps={{
                                            placeholder: '请输入员工姓名',
                                            allowClear: true
                                        }}
                                        fieldsName={{
                                            value: 'employeeCode',
                                            title: 'name'
                                        }}
                                        style={{ width: '12.875em' }}
                                    />
                                )}
                            </span>
                        </Form.Item>
                        <Form.Item label="转配原因">
                            {form.getFieldDecorator('reason', {
                                rules: [{ required: true, message: '请填写转配原因' }]
                            })(<LimitInput placeholder="请输入" maxLength={100} area showNumber />)}
                        </Form.Item>
                    </Form>
                </Spin>
            </Modal>
        );
    })
);

/**
 * 转派
 * @param organizationCode
 * @param operateRecord
 * @param setOperateRecord
 * @param search
 * @returns {JSX.Element|{onShowTransfer: onShowTransfer, onTransfer: onTransfer, render(): *}}
 */
const useTransfer = (organizationCode, operateRecord, setOperateRecord, search) => {
    // 显示转配
    const [showTransfer, setShowTransfer] = useState(false);

    // 展示转配
    const onShowTransfer = record => {
        setShowTransfer(true);
        setOperateRecord(record);
    };

    const onTransfer = (formValues, form, record, setModalLoading) => {
        form.validateFieldsAndScroll(errors => {
            if (errors) {
                return;
            }
            setModalLoading(true);
            transfer({ id: record.id, ...formValues })
                .then(response => {
                    if (!isSuccess(response)) {
                        message.error(response.msg);
                        return;
                    }
                    message.success('转配成功');
                    search();
                    setShowTransfer(false);
                })
                .finally(() => setModalLoading(false));
        });
    };

    return {
        onShowTransfer,
        onTransfer,
        render() {
            return (
                <>
                    <If condition={showTransfer}>
                        <TransferModal
                            visible={showTransfer}
                            onOk={onTransfer}
                            onCancel={() => setShowTransfer(false)}
                            model={operateRecord}
                            organizationCode={organizationCode}
                        />
                    </If>
                </>
            );
        }
    };
};

export default useTransfer;
